<template>
	<view class="loading" :class="{ center }"></view>
	<view class="icon" :style="[{ '--size': size }]"></view>
</template>

<script setup lang="ts">
	import { computed } from 'vue'

	interface Props {
		size ?: number | string,
		center ?: boolean
	}

	const props = withDefaults(defineProps<Props>(), {
		size: 80,
		center: true
	})

	const size = computed(() => {
		if (props.size) {
			if (typeof props.size == 'number') {
				return `${props.size}rpx`
			} else {
				return props.size
			}
		} else {
			return '80rpx'
		}
	})
</script>

<style scoped lang="scss">
	@keyframes rotateEffect {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(1turn);
		}
	}

	.loading {
		@include size(100%);

		&.center {
			@include center(flex);
		}

		.icon {
			@include size(var(--size));
			vertical-align: middle;
			animation: rotateEffect 1s steps(12) infinite;
			background: transparent url() no-repeat;
			background-size: 100%;
		}
	}
</style>